<template>
	<view class="header">
		<view class="">
			<view class="top-xh"></view>
			<view class="fot-xh">
				<view url="" hover-class="none">
					<view class="pic">
						<image v-if="user.avatar" :src="user.avatar" style="width: 110rpx;border-radius: 110rpx;" mode="widthFix"></image>
						<u-avatar
							v-else
							:text="xName"
							:fontSize="xName.length > 2?15:25"
							shape="circle"
							size="70"
							bgColor="#0087FC">
						</u-avatar>
					</view>
					<view class="txt">
						<view class="name">
							<view class="h3">
								{{ user.userName }}
							</view>
							<view class="phone">
								{{ dateWeek }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="ul-list1-xh">
			<view v-for="(item,index) in list" :key="index">
				<view class="li">
					<view url="" hover-class="none" @click="gotoPage(item.path)">
						<view class="pic">
							<image :src="item.image" style="width: 35rpx;" mode="widthFix"></image>
						</view>
						<view class="txt">
							<text>{{item.txt}}</text>
							<text style="position: absolute; right: 10rpx;">{{item.num}}</text>
						</view>
<!-- 						<view class="num">
							<text>{{item.num}}</text>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<uni-fab
			:content="content"
			horizontal="right"
			vertical="bottom"
			direction="vertical"
			@trigger="trigger">
		</uni-fab>
	</view>
</template>

<script>
import { getConfigKey } from '@/api/config.js'
import { strFormatDate,strFormatWeek } from '@/utils/format.js'
export default {
	data() {
		return {
			image: 'https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/c31990f80394475a801d2ce9da428ab0.png',
			title: 'Hello',
			user: {},
			xName:'',
			dateWeek:'',
			list:[
				{
					txt:'任务列表',
					image:'https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/b47b2caa4bb342f3b1f6e642415fd99c.png',
					num:'',
					path:'/subPackTask/taskButler/totalTask/index',
				},
				// {
				// 	txt:'逾期任务',
				// 	image:'/static/work/scgl/overdue.png',
				// 	num:'1',
				// 	path:'',
				// },
				// {
				// 	txt:'我负责的',
				// 	image:'/static/work/scgl/my.png',
				// 	num:'1',
				// 	path:'',
				// },
				// {
				// 	txt:'已完成',
				// 	image:'/static/work/scgl/completed.png',
				// 	num:'2',
				// 	path:'',
				// },
				// {
				// 	txt:'消息',
				// 	image:'/static/work/scgl/message.png',
				// 	num:'2',
				// 	path:'',
				// },
				{
					txt:'统计',
					image:'https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/03a56eccf1434d818f7fddc41759d358.png',
					num:'',
					path:'/subPackTask/taskButler/statistic/index',
				},
			],
			content: [
				{
					path:'/subPackTask/taskButler/add',
					iconPath: 'https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/acaaf8359758412399b3782efaeae1c9.png',
					selectedIconPath: 'https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/acaaf8359758412399b3782efaeae1c9.png',
					text: '标准任务',
					active: false
				},
			],
		}
	},
	onLoad() {
		this.getDateWeek()
	},
	onShow() {
		this.user = uni.getStorageSync("loginInfo").user
		this.xName = this.user.userName.slice(1)
	},
	methods: {
		getDateWeek(){
			let date = new Date()
			this.dateWeek = strFormatDate(date) + " " + strFormatWeek(date)
		},
		trigger(e){
			this.gotoPage(e.item.path)
		},
	},
}
</script>

<style>
	.top-xh {
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.top-xh .h2 {
		float: left;
		font-size: 32rpx;
		font-weight: bold;
	}

	.top-xh .pic {
		float: right;
	}

	.fot-xh{
		margin-left: 50rpx;
	}

	.fot-xh .pic {
		float: left;
		margin-right: 30rpx;
	}

	.fot-xh .txt {
		padding: 10rpx 0;
		overflow: hidden;
		color: #666666;
	}

	.fot-xh .txt .name {
		position: relative;
		display: block;
	}

	.fot-xh .txt .name .h3 {
		font-size: 35rpx;
		margin-bottom: 13rpx;
		font-weight: bold;
	}
	
	.fot-xh .txt .name .phone {
		color: #E5A039;
	}

	.ul-list1-xh {
		padding: 50rpx 50rpx 0 30rpx;
	}

	.ul-list1-xh .li {
		padding: 20rpx 0;
		overflow: hidden;
		position: relative;
	}

	.ul-list1-xh .li .pic {
		float: left;
		margin-right: 20rpx;
	}

	.ul-list1-xh .li .txt {
		overflow: hidden;
		font-size: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid rgb(242, 242, 242);
	}
	
	.ul-list1-xh .li .num {
		content: '';
		position: absolute;
		width: 12rpx;
		height: 12rpx;
		right: 5rpx;
		top: 10%;
	}
	.txt {
		position: relative;
	}
	
</style>